<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="box">
    <div class="title">

      <!-- 单价 -->
      <div class="bar price">单价</div>

      <!-- 数量 -->
      <div class="bar num">数量</div>

      <!-- 小计 -->
      <div class="bar totle">小计</div>

      <!-- 操作 -->
      <div class="bar done">操作</div>
    </div>
    <div class="content">
      <div class="item">

        <!-- 图片展示 -->
        <div class="imgShow left">
          <img src="imgs/hr.jpg" alt="">
        </div>

        <!-- 文字内容 -->
        <div class="text left">
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
        </div>

        <!-- 单价 -->
        <div class="s-price left">
          &yen; <strong>1299.00</strong>
        </div>

        <!-- 数量 -->
        <div class="num1 left">
          <a href="javascript:;" class="sub">-</a>
          <input type="text" value="1">
          <a href="javascript:;" class="add">+</a>
        </div>

        <!-- 总结 -->
        <div class="t_price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 删除 -->
        <div class="del left">
          <a href="javascript:;">移除购物车</a>
        </div>
      </div>
      <div class="item">

        <!-- 图片展示 -->
        <div class="imgShow left">
          <img src="imgs/hr.jpg" alt="">
        </div>

        <!-- 文字内容 -->
        <div class="text left">
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
        </div>

        <!-- 单价 -->
        <div class="s-price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 数量 -->
        <div class="num1 left">
          <a href="javascript:;" class="sub">-</a>
          <input type="text" value="1">
          <a href="javascript:;" class="add">+</a>
        </div>

        <!-- 总结 -->
        <div class="t_price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 删除 -->
        <div class="del left">
          <a href="javascript:;">移除购物车</a>
        </div>
      </div>
      <div class="item">

        <!-- 图片展示 -->
        <div class="imgShow left">
          <img src="imgs/hr.jpg" alt="">
        </div>

        <!-- 文字内容 -->
        <div class="text left">
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
          <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
        </div>

        <!-- 单价 -->
        <div class="s-price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 数量 -->
        <div class="num1 left">
          <a href="javascript:;" class="sub">-</a>
          <input type="text" value="1">
          <a href="javascript:;" class="add">+</a>
        </div>

        <!-- 总结 -->
        <div class="t_price left">
          &yen;<strong>1299.00</strong>
        </div>

        <!-- 删除 -->
        <div class="del left">
          <a href="javascript:;">移除购物车</a>
        </div>
      </div>
    </div>
    <div class="bot">



      <!-- 清空购物车 -->
      <a href="javascript:;" class="clear_p left">清空购物车</a>

      <!-- 商品总数 -->
      <div class="product_num left">
        已购买
        <strong>0</strong>
        件商品
      </div>

      <!-- 商品总价 -->
      <div class="product_money left">
        总价:
        <strong>00.00</strong>
      </div>

    </div>
  </div>


  <script src="./js/jquery-3.6.0.js"></script>
  <script>
    // console.log($('input[type=checkbox]').val());  // 复选框如果没有value值，那么得到 on

    // 找什么元素 --> 注册什么事件 --> 做什么事
    // 1) 找到 + 和 - ，注册单击事件 --> 数量变化，小计变化，总数量总价格变化
    // 2) 找到 移除购物车，注册单击事件 --> 移除当前这个商品，总数量总价格变化
    // 3) 找到 清空购物车，注册单击 --> 移除所有商品，总数量总价格变化

    // 1. --------------------------- 计算总数量，计算总价 ----------------------------

    // 封装成函数，因为后续，无论点击了 - 或者 + 或移除购物车 或 清空购物车，都要计算总数量，总价格
    function jisuan() {
      // 1.1） 计算总数量
      let count = 0;
      // console.log($('.item .num1 input'));
      $('.item .num1 input').each(function () {
        // $(this) 表示找到的每个input
        console.log($(this).val()); // 得到字符串
        count += Number($(this).val());    // count = 1 + 1
      })
      // console.log(count);
      $('.product_num strong').text(count);
      // 1.2） 计算总价格
      let total = 0;
      $('.t_price strong').each(function () {
        total += Number($(this).text())
      })
      // console.log(total);
      $('.product_money strong').text(total.toFixed(2));
    }

    jisuan(); // 页面刷新后，马上要调用一次


    // 2. --------------------------- 点击 - 或 + ---------------------------------
    // 2.1 ）点击 -
    $('.sub').on('click', function () {
      // 取出原来的数量 - 1
      let curr = $(this).next().val(); // 当前的数量
      // 判断当前的数量
      if (curr <= 0) return;
      // 如果curr>0，则进行后面的计算
      let num = Number(curr) - 1;
      $(this).next().val(num);
      // 修改小计 （小计 = 数量 * 单价）
      let price = Number($(this).parent().prev().children('strong').text());
      $(this).parent().next().children('strong').text((num * price).toFixed(2));

      jisuan();
    })
    // 2.2 ）点击 +
    $('.add').on('click', function () {
      // 取出原来的数量 + 1
      let curr = $(this).prev().val(); // 当前的数量
      // 判断当前的数量
      // if (curr <= 0) return;
      // 如果curr>0，则进行后面的计算
      let num = Number(curr) + 1;
      $(this).prev().val(num);
      // 修改小计 （小计 = 数量 * 单价）
      let price = Number($(this).parent().prev().children('strong').text());
      $(this).parent().next().children('strong').text((num * price).toFixed(2));

      jisuan();
    })


    // 3. ----------------------------- 移除购物车 -------------------------------------
    $('.del a').on('click', function () {
      // if (确定不要我了吗？) ....;  alert()  confirm('提示')   prompt()
      if (!confirm('确定要删除吗？')) return;
      $(this).parents('.item').remove();
      jisuan();
    })


    // 4. ----------------------------- 清空购物车 -------------------------------------
    $('.bot a').on('click', function () {
      if (!confirm('确定要清空吗？')) return;
      // $('.item').remove();  // 找到每个商品，移除他们
      $('.content').empty();  // 找到包含商品的大盒子，清空它
      // jisuan(); 
      // 既然清空了，那么总数量和总价格肯定是 0 ，所以也可以找到元素，设置内容为 0
      $('.product_num strong').text(0);
      $('.product_money strong').text('0.00');
    })


    // 5. ---------------------------- 找到输入框，注册blur事件 -------------------------
    $('.item .num1 input').on('keyup', function (e) {
      // 如果按了回车键，进行下面的各项计算 （回车键的keyCode是13）
      if (e.keyCode === 13) {
        // 计算小计 （数量 * 单价）
        // 按回车，希望得到一个 和 失去焦点 一样的结果
        // 那么，使用代码，触发一下 input 的 blur 事件就可以了
        // $(this).事件名(); // ---- 方法一
        // $(this).blur();
        // $(this).trigger('事件名');  // ---- 方法二
        $(this).trigger('blur');
      }
    })

    $('.item .num1 input').on('blur', function () {
      // 如果按了回车键，进行下面的各项计算 （回车键的keyCode是13）
      // 计算小计 （数量 * 单价）
      let num = Number($(this).val());
      let price = Number($(this).parent().prev().children('strong').text());
      $(this).parent().next().children('strong').text((num * price).toFixed(2))
      jisuan();
    })
  </script>
</body>

</html>